<template>
  <span class="nav-title">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="rootPath"><ri i="home"></ri></el-breadcrumb-item>
      <el-breadcrumb-item :to="projectPath">{{projectName}}</el-breadcrumb-item>
      <el-breadcrumb-item>
        <el-popover v-model="showVersions" placement="top-start" width="200" trigger="click">
          <versions :versions="versions" @change-version="changeVersion"></versions>
          <span class="version" slot="reference">{{version}}<ri i="caretdown"></ri></span>
        </el-popover>
      </el-breadcrumb-item>
      <el-breadcrumb-item v-for="(p, i) in paths" :key="i" :to="linkpath(p)">{{p.name}}</el-breadcrumb-item>
      <el-breadcrumb-item @click="$emit=('click-title', $event)">{{filename}}</el-breadcrumb-item>
    </el-breadcrumb>
  </span>
</template>

<script>
import paths from "@js/utils/paths.js";
import Versions from "./Versions.vue";
export default {
  props: ["mat"],
  components: {
    Versions
  },
  computed: {
    source() {
      return this.$route.params.source;
    },
    paths() {
      let name = this.$route.params.pathMatch;
      if (!name) return [];
      console.log("name:", name)
      let parts = name.split("/");
      let ps = [];
      for (let i = 0; i < parts.length - 1; ++i) {
        ps.push({
          name: parts[i],
          path: parts.slice(0, i+1).join("/")
        })
      }
      return ps;
    },
    orgPath() {
      return paths.join('/#/projects/', this.source, this.$route.params.organization);
    },
    orgName() {
      return this.$route.params.organization;
    },
    projectPath() {
      return paths.join('/projects/', this.source, this.$route.params.organization, this.$route.params.project);
    },
    projectName() {
      return this.$route.params.organization + "/" + this.$route.params.project;
    },
    filename() {
      let filepath = this.$route.params.pathMatch;
      if (!filepath) return "";
      return filepath.substr(filepath.lastIndexOf("/")+1)
    },
    rootPath() {
      return this.$store.getters.activeMenuIndex;
    }
  },
  data() {
    return {
      versions: [],
      version: this.$route.params.version,
      showVersions: false,
    }
  },
  created() {
    // load versions
    let path = paths.join(this.source, this.projectName)
    this.$axios.get("/api/v1/mats/versions/bypath/" + path).then((res) => {
      let vs = res.data;
      vs.reverse();
      this.versions = vs;
    });
  },
  methods: {
    linkpath(p) {
      return  paths.join(this.projectPath, 'tree', 'master', p.path);
    },
    changeVersion(v) {
      this.version = v.name;
      this.showVersions = false;
      let ps = this.$route.params;
      let p = paths.join('/projects', ps.source, ps.organization, ps.project, 
        ps.nodetype, this.version, ps.pathMatch);
      console.log("going to version: ", p);
      this.$router.push(p);
    }
  }
}
</script>
<style lang="stylus">
.nav-title
  font-size 1em

  .el-breadcrumb
    display inline-block

    .version
      color #409EFF

.el-popover    
  padding 0
</style>